<template>
  <div class="dialog-container">
    <el-dialog v-model="store.tenantInsertOpen"  :show-close="false" width="50%"
               custom-class="tenant-insert__dialog" draggable overflow>
      <template #header="{ close, titleId }">
        <div class="dialogHeader">
          <span :id="titleId" class="dlgTitleClass" style="margin: 10px 10px;">新增租户</span>
          <el-icon style="font-size: 18px;margin-top: 14px;cursor: pointer" @click="close"><CloseBold /></el-icon>
        </div>
      </template>
      <el-form :rules="ruleFormRef"  :model="newTenantInfo" label-width="100px" class="ruleForm" size="default" ref="addTenantForm">
        <el-row :gutter="20">
          <el-col :lg="12" :md="12" :xs="24">
            <el-form-item label="租户名称" prop="tenantName">
              <el-input v-model="newTenantInfo.tenantName" placeholder="请输入租户名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :xs="24">
            <el-form-item label="社会信用代码" prop="licenseNumber">
              <el-input v-model="newTenantInfo.licenseNumber" placeholder="请输入社会信用代码"></el-input>
            </el-form-item>
          </el-col>

          <el-col :lg="12" :md="12" :xs="24">
            <el-form-item label="联系人" prop="contactUserName">
              <el-input v-model="newTenantInfo.contactUserName" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :xs="24">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="newTenantInfo.contactPhone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :xs="24">
            <el-form-item label="租户地址" prop="address">
              <el-input v-model="newTenantInfo.address" placeholder="请输入租户地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="6" :xs="24">
            <el-form-item label="租户状态" prop="status">
              <el-radio-group v-model="newTenantInfo.status" @change="console.log('newTenantInfo.status', newTenantInfo.status)">
                <el-radio-button label="启用租户" :value="0" />
                <el-radio-button label="禁用租户" :value="1" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="租户简介" prop="intro">
              <el-input type="textarea" :rows="4" v-model="newTenantInfo.intro" placeholder="请输入租户简介"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="button-item" style="width: 100%;">
          <div class="button-group">
            <el-button type="primary" @click="submitForm" class="el-button__primary" >
              <template #icon>
                <Check/>
              </template>
              确定添加
            </el-button>
            <el-button @click="resetForm" class="el-button__plain">
              <template #icon>
                <Refresh/>
              </template>
              重置表单</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {tenantStore} from "@/stores/tenant/tenantStore.ts";
import {defineEmits, reactive, ref} from 'vue';
import {ArrowLeft, Check, CloseBold, Refresh} from "@element-plus/icons-vue";
import type {TenantInsertVO} from "@/api/tenant/types.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import {addNewTenant} from "@/api/tenant";
const emit = defineEmits(['refresh'])

const store = tenantStore();
const addTenantForm=ref()
const ruleFormRef = ref({
  tenantName: [
      { required: true, trigger: 'blur', message: '请输入租户名'},
      { min: 5, max: 20, trigger: 'blur',message: '请输入5-20个字符'},
  ],
  status:[
    { required: true, trigger: 'blur', message: '请选择租户状态'}
  ]
});

const newTenantInfo =ref({} as TenantInsertVO);

const submitForm = async () => {
  //校验表单
  const valid=await addTenantForm.value.validate()
  if (valid){
   ElMessageBox.confirm('确定修改租户信息吗？', '提示', {
     app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(async () => {
     const tenant = newTenantInfo.value
     const res = await addNewTenant(tenant)
     if (res.data) {
       ElMessage.success("添加成功")
       store.setTenantInsertOpen(false)
       //调用父组件的方法
       emit('refresh')
     }
   }).finally(()=>{
     closeAction()
   })
  }

};
const closeAction = () => {
  resetForm()
  addTenantForm.value.clearValidate()
}
const closeDialog=()=>{
  closeAction()
  store.setTenantInsertOpen(false)
}
const resetForm = () => {
  newTenantInfo.value={} as TenantInsertVO
};
</script>

<style scoped>
.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-form{
  margin-right: 100px;
}
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 18px;
}

:deep(.el-dialog) {
  border-radius: 6px;
  margin-top: 12vh;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.el-button {
  margin-right: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form {
  margin: 20px;
}

:deep(.el-textarea__inner) {
  border: 0;
  resize: none;
}

:deep(.el-input__wrapper.is-focus,.el-select__wrapper.is-focus) {
  box-shadow: 0 0 0 1px rgb(46, 92, 246) !important;
  .el-input__inner {
    cursor: default !important;
  }
}

:deep(.el-textarea__inner.is-focus) {
  box-shadow: 0 0 0 1px rgb(46, 92, 246) !important;
}

.button-group {
  position: absolute;
  right: 10px;
  gap: 20px; /* 按钮之间的间距 */
}

.button-item {
  position: relative;
  margin: 20px;
}
:deep(.el-radio-button__inner:hover) {
  color: rgb(46, 92, 246) !important;
}
:deep(.el-radio-button.is-active .el-radio-button__inner:hover) {
  color: #ffffff !important;
}

:deep(.el-radio-button.is-active){
  --el-radio-button-checked-border-color: rgb(46, 92, 246);
  --el-radio-button-checked-bg-color:rgb(46, 92, 246);
  color: #ffffff;
}
:deep(.el-form-item__label){
  font-weight: bold;
}
.el-dialog .el-dialog__header
{
  margin: 0 !important;
  padding: 0 !important;
}
.el-dialog .dialogHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  margin: 0 10px;
  font-size: 18px;
  font-weight: bolder;
}
</style>